<template>
  <div class="add-content-box edit-content" v-for="(item, key) in propertyList" :key="`${key}_${item.uuid}`">
    <template v-if="defer(key)">
      <el-select
        :class="{ fixed: item.fixed }"
        :disabled="item.fixed"
        filterable
        v-model="item.partTypeId"
        placeholder="请选择"
        clearable
        @change="val => changeHandler(val, item)"
      >
        <el-option v-for="item in selectList['keyPartList']" :key="item.name" :label="item.name" :value="item.id" />
      </el-select>
      <div class="add-img-box">
        <div>
          <el-select
            class="mt10 mb10"
            filterable
            v-model="item.partId"
            placeholder="请选择"
            clearable
            @focus="() => getDicById(item.partTypeId)"
            @change="val => changeHandlerOptions(val, item)"
          >
            <el-option v-for="item2 in selectList[item.partTypeId]" :key="item2.id" :label="item2.name" :value="item2.id">
            </el-option>
          </el-select>
          <el-input v-model="item.code" placeholder="请输入"></el-input>
        </div>
        <div class="add-img mt10">
          <Upload :list="[item]" :num="1" :width="74" :height="74" :is-edit="isEdit">
            <template #default="{ event, scope }">
              <div class="add-img-plus" @click="event" v-if="!scope.path && isEdit">
                <el-icon><Plus /></el-icon>
              </div>
              <div class="add-img-plus" v-else-if="scope.path">
                <el-image
                  style="width: 100%; height: 100%"
                  :src="scope.previewLink"
                  :preview-src-list="[scope.previewLink]"
                  :initial-index="1"
                />
                <!-- <img :src="urlResource + scope.path" alt="" /> -->
              </div>
              <div v-else class="add-img-plus">暂无</div>
            </template>
          </Upload>
        </div>
      </div>

      <el-icon name="el-icon-delete" class="delete-icon" @click="() => deleteItem(item)" v-if="!item.fixed && isEdit">
        <CircleCloseFilled />
      </el-icon>
    </template>
  </div>
  <div class="add-content-box add-content" v-if="isEdit">
    <span @click="addHandler">新增零件</span>
  </div>
</template>
<script setup lang="ts">
import { defineModel, inject, onMounted } from "vue";
import { generateUUID } from "@/utils";
import { useDefer } from "@/hooks/useDefer";
import { useUtils } from "../../hooks/useUtils";
import Upload from "../../Upload.vue";
const defer = useDefer(600);
//变量
const propertyList = defineModel("propertyList", {
  type: Array,
  default: () => []
});
// inject
const selectList: any = inject("selectList");
// const urlResource: any = inject("urlResource");
const isEdit = inject("isEdit");
// hook
const { fittingsFn } = useUtils();

// 方法

const changeHandlerOptions = (val: string, item: any) => {
  console.log(val);
  item.code = "";
  item.path = "";
};
const changeHandler = (val: string, item: any) => {
  console.log(val, item);
  getDicById(val);
  item.partId = "";
  item.code = "";
};

const getDicById = async (parentIdList: string) => {
  let res = await fittingsFn(parentIdList);
  selectList.value = { ...selectList.value, ...res };
};
const deleteItem = (item: any) => {
  const index = propertyList.value.findIndex(itm => itm.uuid == item.uuid);
  propertyList.value.splice(index, 1);
};
const addHandler = () => {
  propertyList.value.push({
    id: "",
    remark: "",
    partTypeId: "",
    partId: "",
    partName: "",
    code: "",
    type: 1,
    path: "",
    uuid: generateUUID(),
    fixed: 0,
    lonely: 1
  });
};
onMounted(() => {
  for (let item of propertyList.value) {
    getDicById(item.partTypeId);
  }
});
</script>
<style lang="scss" scoped>
.add-img {
  display: flex;
  :deep(.d-upload) {
    flex: 0 0 40px;
    margin-left: 10px;
    .add-img-plus {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      font-size: 14px;
      color: #999999;
      cursor: pointer;
      background-color: #f5f7fa;
      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }
    li:has(.add-img-plus) {
      margin-bottom: 0 !important;
    }
    li {
      .d-upload-close {
        top: 0;
        right: -10px;
      }
    }
  }
}
.add-content-box {
  width: 100%;
  height: 62px;
  // background-color: var(--input-background);
}
.add-content {
  display: flex;
  align-items: flex-end;
  height: 100%;
  background-color: initial;
  span {
    width: 100%;
    height: 80px;
    margin-bottom: 30px;
    font-size: 16px;
    font-weight: 400;
    line-height: 80px;
    color: #666666;
    text-align: center;
    cursor: pointer;
    background-color: #f5f7fa;
  }
}
.edit-content {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-flow: column nowrap;
  height: auto;

  // padding: 14px 11px;
  margin-bottom: 30px;
  .delete-icon {
    position: absolute;
    top: -10px;
    right: -10px;
    display: block;
    font-size: 14px;
    cursor: pointer;
  }
}
.rundle-dot {
  width: 8px;
  height: 8px;
  margin-right: 4px;
  border-radius: 50%;
}
.fixed {
  :deep(.el-select__wrapper) {
    font-size: 16px;
    cursor: auto;
    background: none;
    border: 0;
    box-shadow: none;
    .el-select__suffix {
      display: none;
    }
    .el-select__selected-item {
      color: #666666 !important;
    }
  }
}
.add-img-box {
  display: flex;
  .add-img {
    flex: 0 0 74px;
  }
}
</style>
